<template>
  <div class='container'>
   <div>
      <!-- 页首用一个卡片包裹 -->
   <el-card>
      <!-- Layout 布局:将一行均分成24等份 -->
      <el-row>
         <el-col :span="18">
         <el-row>
            <!-- ref="clear" -->
            <el-form :inline="true"  class="demo-form-inline" model="params" size="small">
               <el-form-item label="标签名称">
                  <!-- tagName -->
                 <!-- placeholder:文本框里面的提示 -->
                 <el-input v-model="tagName"></el-input>
               </el-form-item>
                <el-form-item label="状态">
                  <!-- state -->
                  <el-select v-model="sizeForm.state" placeholder="请选择" >
                     <el-option v-for="item,index in status" :key="index" :label="item.label" :value="item.value" ></el-option>
                  </el-select>
               </el-form-item>
               <el-form-item>
                  <el-button @click="eliminate(tagName,sizeForm.region)">清除</el-button>
                  <!-- this.$refs.名字.resetFields() -->
                  <el-button type="primary" @click="search">搜索</el-button>
                  <!-- type:颜色   icon：图标 -->
                  <!-- <el-button type="success" icon="el-icon-edit" color="AddNewTag" @click="addLabel(1)" >新增标签</el-button> -->
               </el-form-item>
            </el-form>
         </el-row>
         </el-col>
          <!-- 新增学科 -->
         <el-col  :span="6" style="text-align:right" size="small">
            <!-- 返回学科 -->
            <el-button type="text" class="el-icon-back" @click="btnreturn" v-show="identity.id">返回学科</el-button>
            <!-- 新增按钮 -->
            <el-button type="success" icon="el-icon-edit" color="AddNewTag" @click="addLabel" class="addtog">新增标签</el-button>
         </el-col>
      </el-row>
   </el-card >
      <!-- 灰色的信息数量统计 -->
      <el-alert
        title=""
        type="info"
        :closable="false"
        show-icon>
        <span slot='title'>一共有{{total}}条数据</span>
      </el-alert>
      <!-- 页面主体内容 -->
      <el-table
        :data="directoryList"
         >
         <el-table-column
           prop=""
           type="index"
           label="序号"
           >
         </el-table-column>
         <el-table-column
           prop="subjectName"
           label="所属学科"
          >
         </el-table-column>
         <el-table-column
           prop="tagName"
           label="标签名称"
           >
         </el-table-column>
         <el-table-column
           prop="username"
           label="创建者"
           >
         </el-table-column>
         <el-table-column
           prop="addDate"
           label="创建日期"
           >
         </el-table-column>
         <el-table-column
           prop="state"
           label="状态"
          >
            <template #default="{row}">
               <span v-if="+row.state===0">已禁用</span>
               <span v-else>已启用</span>
            </template>
         </el-table-column>
         <el-table-column
           prop="operate"
           label="操作"
           >
         <template #default="{row}">
               <el-button  type="text"  @click="enable(row.id,row.state)">
                  <span v-if="row.state">禁止</span>
                  <span v-else>启用</span>
               </el-button>
               <el-button  type="text" @click="amend(row)" :disabled="row.state===1?true:false" >修改</el-button>
               <el-button  type="text"  @click="deleteKeys(row)"  :disabled="row.state===1?true:false" >删除</el-button>
         </template>
         </el-table-column>
       </el-table>
          <!-- 页脚 -->
      <el-row type="flex" justify="end" align="end" style="height: 60px;" >
         <!-- 每页条数: @size-change;当前页:@current-change;params-->
         <el-pagination
            @size-change="changeSize"
            @current-change="changeCurrent"
            :page-sizes="[5, 10, 30, 40]"
            layout="prev, pager, next,sizes, jumper"
            :current-page='params.page'
            :total="total"
            :page-size="params.pagesize">
          </el-pagination>
       </el-row>
   </div>
      <!-- 新增编辑弹窗   @click="btnCancel"- label-width="90px"-->
      <el-dialog :title="title" :visible="showDialog" @close="btnCancel" width="26%" >
         <!-- 表单 -->
         <el-form ref="PerMission" :model="ruleForm"  label-width="100px" :span="20"  :rules="rules">
            <el-form-item label="所属学科" prop="subjectID">
          <el-select placeholder="请选择学科" v-model="ruleForm.subjectID" >
            <el-option v-for="(item,index) in slist" :key="index"  :label="item.label" :value="item.value"> </el-option>
             <!-- <el-option v-for="item in employees" :key="item.id" :label="item.username" :value="item.username" /> -->
            </el-select>
            </el-form-item>
            <el-form-item label="目录名称" prop="tagName" style=" width: 320px;">
               <el-input v-model="ruleForm.tagName" label-width="120px" placeholder="请输入目录名称" />
            </el-form-item>
         </el-form>
         <el-row slot="footer" type="flex" justify="center">
         <el-col :span="1" style="display: flex;">
            <el-button size="small" @click="btnCancel">取消</el-button>
            <el-button size="small" type="primary" @click="btnOk">确定</el-button>
         </el-col>
         </el-row>
    </el-dialog>
   </div>
</template>

<script>
// tagsList:数据接口
// remove:删除接口
// update:修改接口
// detail:详情页面
// changeState:标签状态
// add：添加接口
// changeState：状态接口
import { tagsList, remove, update, changeState, add } from '../../api/hmmm/tags'
import { simple } from '@/api/hmmm/subjects.js'
import { status } from '@/api/hmmm/constants.js'
export default {

  data () {
    return {
      directoryList: [], // 将获取到的后台数据以数组的形式存放到这里
      sizeForm: {
        region: ''
      }, // 定义下拉框的v-model
      total: 0, // 统计条
      showDialog: false, // 定义弹框的显示或者隐藏
      state: null, // 定义按钮是否禁用
      tagName: '',
      formData: {
        page: 1,
        pagesize: 10
      },
      params: {
        page: 1,
        pagesize: 10
      },
      // 弹框
      ruleForm: {
        subjectID: '', // 所属学科
        tagName: ''// 标签名称
      },
      // 弹框内容校验
      rules: {
        subjectName: [{ required: true, message: '请选择所属学科', trigger: 'blur' }], // 所属学科
        tagName: [{ required: true, message: '请输入标签名称', trigger: 'blur' }]// 标签名称
      },
      slist: '', // 所属学科列表
      status: status, // 枚举状态
      identity: this.$route.query// 获取到学科页面跳转时的参数，用来判断--返回学科--按钮是否隐藏
    }
  },
  created () {
    this.tagsList()
    this.simpleList()
    console.log(this.identity)
  },
  computed: {
    title () {
      return this.ruleForm.id ? '编辑目录' : '新增目录'
    }
  },
  methods: {
    // 获取后台数据
    async tagsList () {
      const { data } = await tagsList(this.params)
      console.log(data)
      this.directoryList = data.items
      this.total = data.counts
    },
    //  返回学科按钮
    btnreturn () {
      console.log('返回学科')
      this.$router.back()// 这是返回上一页，不是路由跳转到指定页面
    },
    //  获取所属学科
    async simpleList () {
      const { data } = await simple()
      this.slist = data
    },
    //  操作->启用/禁用按钮切换
    async enable (id, state) {
      state = state ? 0 : 1
      await changeState(id, state)
      this.tagsList()
      this.$message.success('操作成功')
    },
    //  操作->修改
    async amend (data) {
      // console.log('修改')
      this.ruleForm = data
      this.showDialog = true
    },
    //  操作->删除
    async deleteKeys (id) {
      try {
        await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
        await remove(id)
        this.tagsList()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    //  弹窗取消和×号
    btnCancel () {
      this.showDialog = false
      this.ruleForm = {
        subjectID: '', // 所属学科
        tagName: ''// 标签名称
      }
    },
    //  弹窗确定按钮
    async btnOk () { // async
      // await update(this.ruleForm)
      if (this.ruleForm.id) {
        await update(this.ruleForm)
      } else {
        await add(this.ruleForm)
        this.params.page = 1
      }
      this.showDialog = false
      this.tagsList()
    },
    // 搜索框清除
    async eliminate () {
      this.sizeForm.state = ''// 清空两个输入框传入的值
      this.tagName = ''
      await this.tagsList()
      // console.log(this.sizeForm.region)
    },
    // 搜索
    async  search () {
      // console.log('点击搜索!')
      // tagName
      this.directoryList = []
      const { data: { items } } = await tagsList({ tagName: this.tagName, state: this.sizeForm.state })
      // console.log(items)
      this.directoryList = items
      this.total = this.data.counts
    },
    //  新增标签
    addLabel () {
      console.log('新增标签')
      this.showDialog = true
    },
    //  页脚
    changeSize (size) {
      console.log('size', size)
      this.params.pagesize = size
      this.params.page = 1
      this.tagsList()
      console.log(tagsList)
    },
    changeCurrent (page) {
      console.log('page', page)
      this.params.page = page
      this.tagsList()
    }
  }
}

</script>

<style scoped lang='scss'>
 

   .card{
      margin-top: 10px;
      margin-left: 7px;
      margin-right: 7px;
    }
     .demo-form-inline{
         width: 100%;
        justify-content: space-between;
     }

     .el-table{
      margin-top: 10px;
     }
// 定义弹框的显示或者隐藏
//   props: {
//     showDialog: {
//       type: Boolean,
//       default: false
//     }
//   },
</style>
